<template>
  <div>
    <list-item
      v-for="v in productList"
      :key="v.id"
      :pid="v.id"
      :pname="v.name"
      :prate="v.annualProfitRate"
      :pmin="v.initialDepositAmount"
      :psty="v.interestSettlementMethod"
      @getOrder="createOrder"
    />
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-input placeholder="请输入购买金额" v-model="amount" clearable />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendOrder">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ListItem from "@/pages/ListItem.vue";
import { getProducts } from "@/api/product";
import { getCurrentUser } from "@/api/user";

export default {
  name: "List",
  components: { ListItem },
  data() {
    return {
      productList: [],
      dialogVisible: false,
      amount: undefined,
      pid: '',
      pmin: 0
    };
  },
  created() {
    this.getList();
    //获取当前用户的信息
    this.currentUserInfo();
  },
  methods: {
    getList() {
      getProducts().then((res) => {
        this.productList = res.data;
      });
    },
    currentUserInfo() {
      getCurrentUser().then((res) => {
        this.$store.commit("SET_USER", res.data);
        this.$store.commit("SET_UID", res.data.id);
      });
    },
    createOrder(arr) {
      this.pid = arr[0];
      this.pmin = arr[1];
      this.dialogVisible = true;
    },
    sendOrder() {
      if(this.amount < this.pmin) {
        this.$message.warning("购买金额小于限定金额，请重新输入");
        this.amount = 0;
      }else{
        this.$store.commit("SET_PID",this.pid);
        this.$store.commit("SET_PMIN",this.amount);
        this.$router.push('/orderinfo');
      }
    }
  },
};
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
</style>